Carousel

A jQuery plugin for simple content carousels.

Demo

Basic

Paged

Uneven

Infinite

No Controls

Breakpoint

Responsive Counts

Use

Main

carousel.js
carousel.css

Dependencies

core.js
mediaquery.js
touch.js

Basic

Carousel will treat immediate children as items to scroll through. By default, all pages will be sized to the width of the carousel.

$(".target").carousel();
<div class="target">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

Show

Set the show option to a value, or object, at initialization to allow more pages to be visible at once. If passing an object keys should be valid min-width media query values, including units.

$(".target").carousel({
    show: 2
});
$(".target").carousel({
    show: {
        "740px" : 2,
        "960px" : 3
    }
});

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-carousel-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Name Type Default Description
autoAdvance boolean false Flag to auto advance items
autoHeight boolean false Flag to auto-size items
autoTime int 8000 Auto advance time
controls boolean true Flag to draw controls
customClass string '' Class applied to instance
fill boolean false Flag to fill viewport if item count is less then show count
infinite boolean false Flag for looping items
labels.next string 'Next' Control text
labels.previous string 'Previous' Control text
maxWidth string 'Infinity' Width at which to auto-disable plugin
minWidth string '0' Width at which to auto-disable plugin
paged boolean false Flag for paged items
pagination boolean true Flag to draw pagination
show int / object 1 Items visible per page; Object for responsive counts
useMargin boolean false Use margins instead of css transitions (legacy browser support)

Events

Events are triggered on the target instance's element, unless otherwise stated.

Event Description
update.carousel Carousel position updated

Methods

Methods are publicly available to all active instances, unless otherwise stated.

disable

Disables instance of plugin

$(".target").carousel("disable");

enable

Enables instance of plugin

$(".target").carousel("enable");

jump

Jump instance of plugin to specific page

$(".target").carousel("jump", 1);

next

Move to next item

Parameters

Name Type Default Description
data object   Instance data

previous

Move to the previous item

$(".target").carousel("previous");

reset

Resets instance after item change

$(".target").carousel("reset");

resize

Resizes instance

$(".target").carousel("resize");

CSS

Class Type Description
.fs-carousel-element element Target elmement
.fs-carousel element Base widget class
.fs-carousel.fs-enabled modifier Indicates enabled state
.fs-carousel-viewport element Carousel container
.fs-carousel-wrapper element Carousel container
.fs-carousel-container element Canister container
.fs-carousel-canister element Item container
.fs-carousel-item element Individual item
.fs-carousel-controls element Controls container
.fs-carousel-controls.fs-carousel-visible modifier Indicates visible state
.fs-carousel-control element Control element
.fs-carousel-control.fs-carousel-control_previous modifier Indicates previous control
.fs-carousel-control.fs-carousel-control_next modifier Indicates next control
.fs-carousel-control.fs-carousel-control_disabled modifier Indicates disbaled state
.fs-carousel-pagination element Item element
.fs-carousel-pagination.fs-carousel-visible modifier Indicates visible state
.fs-carousel-page element Pagiantion item element
.fs-carousel-page.fs-carousel-active modifier Indicates active state